<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>早餐</title>
    <link rel="stylesheet" href="../CSS/common.css">
    <link rel="stylesheet" href="../CSS/top.css">
    <link rel="stylesheet" href="../CSS/swiper-bundle.css">
    <link rel="stylesheet" href="../CSS/botton.css">
    <link rel="stylesheet" href="../CSS/ZaoCan.css">
</head>

<body>
    <div id="app">
        <!-- 头部/2 -->
        <header>
            <a href="./home.html">
                <img src="../img//fh.png" alt="">
            </a>
            <span>早餐</span>
        </header>
        <section class="warp">
            <div class="div-1">
                <a href="#">
                    <p style="color: rgb(48, 182, 77);">早餐</p>
                    <img src="../img/qx.png" alt="">
                </a>
                <a href="#">
                    <p>午餐</p>
                </a>
                <a href="#">
                    <p>晚餐</p>
                </a>
            </div>
        </section>
        <section class="warp-1">
            <img src="../img/tp.jpg" alt="">
            <div class="div-1">早餐菜谱</div>
            <div class="div-2">
                <div v-for="item in list">
                    <img :src="item.URL" alt="">
                    {{item.text}}
                </div>

            </div>
        </section>
    </div>
    <script src="../jS/flexible.js"></script>
    <script src="../JS/vue3.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    list: [{
                        URL: "../img/tp3.jpg",
                        text: " 自制煎蛋三明治"
                    }, {
                        URL: "../img/tp4.jpg",
                        text: " 自制煎蛋三明治"
                    }, {
                        URL: "../img/tp5.jpg",
                        text: " 自制煎蛋三明治"
                    }, {
                        URL: "../img/tp4.jpg",
                        text: " 自制煎蛋三明治"
                    }, {
                        URL: "../img/tp5.jpg",
                        text: " 自制煎蛋三明治"
                    }, {
                        URL: "../img/tp3.jpg",
                        text: " 自制煎蛋三明治"
                    }, {
                        URL: "../img/tp5.jpg",
                        text: " 自制煎蛋三明治"
                    }, {
                        URL: "../img/tp3.jpg",
                        text: " 自制煎蛋三明治"
                    }, ],
                }
            },
        }).mount("#app")
    </script>
</body>

</html>